<template>
  <d2-container>
    <div style="margin: 20px">
      <div style="margin: 20px 0">
        <span style="text-align: left; font-size: 28px; color: #1E90FF"><b>| </b></span>
        <span style="text-align: left; font-size: 22px"><b>整体评估</b></span>
      </div>
      <el-divider></el-divider>

      <el-tooltip placement="top" effect="dark">
        <div slot="content">
          损失是一个度量模型预测输出与实际输出之间误差或差异的指标。损失值越低，模型预测的准确性就越高。
        </div>
        <el-button :type="currentSeverity==='loss'?'primary':'info'" @click="drawLoss('loss')">损失图</el-button>
      </el-tooltip>
      <el-button :type="currentSeverity==='metric'?'primary':'info'" @click="drawMetric('metric')">性能指标</el-button>
      <el-button :type="currentSeverity==='curve'?'primary':'info'" @click="drawCurve('curve')" v-if="this.type===1">
        曲线图
      </el-button>
      <el-tooltip placement="top" effect="dark" v-if="this.type!==0">
        <div slot="content">
          混淆矩阵是对分类问题预测结果的总结。使用计数值汇总正确和不正确预测的数量，并按每个类进行细分，显示了分类模型进行预测时会对哪一部分产生混淆。
        </div>
        <el-button :type="currentSeverity==='confusion'?'primary':'info'" @click="drawConfusion('confusion')"
                   v-if="this.type!==0">混淆矩阵
        </el-button>
      </el-tooltip>

      <div style="margin: 20px 0; text-align: left; font-size: 22px" v-if="this.type===0 && this.loss===true">
        <el-row>
          <el-col :span="12">
            <el-card style="margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "train/loss"表示一个训练周期中所有训练样本的平均损失值。
                </div>
              </el-tooltip>
              <div id="chart0" style="height: 400px"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card style="margin-left: 10px;margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "val/loss"表示所有验证样本的平均损失值。验证数据用于评估模型性能并避免过拟合。
                </div>
              </el-tooltip>
              <div id="chart1" style="height: 400px"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div style="margin: 20px 0; text-align: left; font-size: 22px" v-if="this.type===0 && this.metric===true">
        <el-row>
          <el-col :span="12">
            <el-card style="margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "metrics/accuracy_top1"指模型对一个数据样本的预测结果，模型预测的结果和样本的真实类别相同的比例。
                </div>
              </el-tooltip>
              <div id="chart0" style="height: 400px"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card style="margin-left: 10px;margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "metrics/accuracy_top5"指模型对一个数据样本的预测结果，模型预测的结果中，真实类别在排名前5的比例。
                </div>
              </el-tooltip>
              <div id="chart1" style="height: 400px"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div style="margin: 20px 0; text-align: left; font-size: 22px" v-if="this.type===1 && this.loss===true">
        <el-row>
          <el-col :span="8">
            <el-card style="margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "train/box_loss"表示目标检测任务中的边界框损失函数，表示模型对目标边界框的预测准确性。
                </div>
              </el-tooltip>
              <div id="chart0" style="height: 300px"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card style="margin-left: 10px;margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "train/obj_loss"表示目标检测任务中的目标损失函数，表示模型对目标的检测准确性。
                </div>
              </el-tooltip>
              <div id="chart1" style="height: 300px"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card style="margin-left: 10px;margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "train/cls_loss"表示目标检测任务中的分类损失函数，表示模型对目标类别的预测准确性。
                </div>
              </el-tooltip>
              <div id="chart2" style="height: 300px"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-card style="margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "val/box_loss"表示验证集中的边界框损失函数，用于评估模型的泛化能力。
                </div>
              </el-tooltip>
              <div id="chart3" style="height: 400px"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card style="margin-left: 10px;margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "val/obj_loss"表示验证集中的目标损失函数，用于评估模型的泛化能力。
                </div>
              </el-tooltip>
              <div id="chart4" style="height: 400px"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card style="margin-left: 10px;margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "val/cls_loss"表示验证集中的分类损失函数，用于评估模型的泛化能力。
                </div>
              </el-tooltip>
              <div id="chart5" style="height: 400px"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div style="margin: 20px 0; text-align: left; font-size: 22px" v-if="this.type===1 && this.curve===true">
        <el-row>
          <el-col :span="12">
            <el-card style="margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  精确率和置信度的关系图，表示模型在不同阈值下的精确率。精确率表示模型预测的正确结果占所有预测结果的比例。
                </div>
              </el-tooltip>
              <el-image :src=this.picture[1]></el-image>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card style="margin-left: 10px;margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  召回率和置信度的关系图，表示模型在不同阈值下的召回率。召回率表示模型预测的正确结果占所有真实结果的比例。
                </div>
              </el-tooltip>
              <el-image :src=this.picture[2]></el-image>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-card style="margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  精确率和召回率的关系图，如果模型的精度越高，召回率越高，PR曲线下面的面积越大，模型的性能越好。
                </div>
              </el-tooltip>
              <el-image :src=this.picture[3]></el-image>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card style="margin-left: 10px;margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  F1分数和置信度的关系图，表示模型在不同阈值下的F1分数。F1分数是精确率和召回率的调和平均数，可以更全面地评估模型的性能。
                </div>
              </el-tooltip>
              <el-image :src=this.picture[4]></el-image>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div style="margin: 20px 0; text-align: left; font-size: 22px" v-if="this.type!==0 && this.metric===true">
        <el-row>
          <el-col :span="12">
            <el-card style="margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "metrics/precision"指精确率，表示模型预测的正确结果占所有预测结果的比例。
                </div>
              </el-tooltip>
              <div id="chart0" style="height: 400px"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card style="margin-left: 10px;margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "metrics/recall"指召回率，表示模型预测的正确结果占所有真实结果的比例。
                </div>
              </el-tooltip>
              <div id="chart1" style="height: 400px"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-card style="margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "metrics/mAP_0.5"指平均精度，在预测置信度阈值为0.5时计算。mAP是精确率和召回率的融合，可以更全面地评估模型的性能。
                </div>
              </el-tooltip>
              <div id="chart2" style="height: 400px"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card style="margin-left: 10px;margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "metrics/mAP_0.5:0.95"指mAP从0.5到0.95，表示预测置信度的阈值从0.5到0.95的mAP。
                </div>
              </el-tooltip>
              <div id="chart3" style="height: 400px"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div style="margin: 20px 0; text-align: left; font-size: 22px" v-if="this.type!==0 && this.confusion===true">
        <el-row>
          <el-col :span="14">
            <el-card style="margin-top: 10px">
              <el-image :src=this.picture[0]></el-image>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div style="margin: 20px 0; text-align: left; font-size: 22px" v-if="this.type===2 && this.loss===true">
        <el-row>
          <el-col :span="8">
            <el-card style="margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "train/seg_loss"表示图像分割任务中的分割损失函数，表示模型对目标分割的准确性。
                </div>
              </el-tooltip>
              <div id="chart0" style="height: 300px"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card style="margin-left: 10px;margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "train/obj_loss"表示图像分割任务中的目标损失函数，表示模型对目标的检测准确性。
                </div>
              </el-tooltip>
              <div id="chart1" style="height: 300px"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card style="margin-left: 10px;margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "train/cls_loss"表示图像分割任务中的分类损失函数，表示模型对目标类别的预测准确性。
                </div>
              </el-tooltip>
              <div id="chart2" style="height: 300px"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-card style="margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "val/seg_loss"表示验证集中的分割损失函数，用于评估模型的泛化能力。
                </div>
              </el-tooltip>
              <div id="chart3" style="height: 400px"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card style="margin-left: 10px;margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "val/obj_loss"表示验证集中的目标损失函数，用于评估模型的泛化能力。
                </div>
              </el-tooltip>
              <div id="chart4" style="height: 400px"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card style="margin-left: 10px;margin-top: 10px">
              <el-tooltip placement="top" effect="dark">
                <i class="el-icon-question"/>
                <div slot="content">
                  "val/cls_loss"表示验证集中的分类损失函数，用于评估模型的泛化能力。
                </div>
              </el-tooltip>
              <div id="chart5" style="height: 400px"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>

    </div>
  </d2-container>
</template>

<script>
import {GetModelObj, GetReport} from './api'
import * as echarts from 'echarts'

export default {
  name: 'index',
  data() {
    return {
      currentSeverity: '',
      type: '',
      result: [],
      loss: false,
      metric: false,
      curve: false,
      confusion: false,
      chart: [],
      picture: []
    }
  },
  methods: {
    // 根据模型ID获取项目类型
    getType(modelID) {
      GetModelObj(modelID * 1).then(response => {
        this.type = response.data.type
      })
    },
    // 获取评估报告
    getReport(modelID) {
      GetReport(modelID).then(response => {
        console.log(response)
        this.result = response.data[0]
        if (this.type !== 0) {
          this.picture[0] = 'data:image/jpeg;base64,' + response.data[1]
        }
        if (this.type === 1) {
          this.picture[1] = 'data:image/jpeg;base64,' + response.data[2]
          this.picture[2] = 'data:image/jpeg;base64,' + response.data[3]
          this.picture[3] = 'data:image/jpeg;base64,' + response.data[4]
          this.picture[4] = 'data:image/jpeg;base64,' + response.data[5]
        }
      })
    },
    dispose() {
      if (this.chart[0]) this.chart[0].dispose()
      if (this.chart[1]) this.chart[1].dispose()
      if (this.chart[2]) this.chart[2].dispose()
      if (this.chart[3]) this.chart[3].dispose()
      if (this.chart[4]) this.chart[4].dispose()
      if (this.chart[5]) this.chart[5].dispose()
    },
    drawCurve(severity) {
      this.currentSeverity = severity
      this.curve = true
      this.loss = false
      this.metric = false
      this.confusion = false
      this.dispose()
    },
    drawConfusion(severity) {
      this.currentSeverity = severity
      this.confusion = true
      this.loss = false
      this.metric = false
      this.curve = false
      this.dispose()
    },
    drawMetric(severity) {
      this.currentSeverity = severity
      this.metric = true
      this.loss = false
      this.curve = false
      this.confusion = false
      if (this.type === 0) {
        // 指定图表的配置项和数据
        const option0 = {
          title: {
            text: 'metrics/accuracy_top1',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none', smooth: true
            }
          ]
        }
        const option1 = {
          title: {
            text: 'metrics/accuracy_top5',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none', smooth: true
            }
          ]
        }
        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
        this.dispose()
        setTimeout(() => {
          this.chart[0] = echarts.init(document.getElementById('chart0'))
          this.chart[1] = echarts.init(document.getElementById('chart1'))
          const epoch = []
          const top1 = []
          const top5 = []
          for (let i = 0; i < this.result.length; i++) {
            epoch.push(this.result[i].epoch)
            top1.push(this.result[i]['metrics/accuracy_top1'])
            top5.push(this.result[i]['metrics/accuracy_top5'])
          }
          option0.xAxis.data = epoch
          option0.series[0].data = top1
          option1.xAxis.data = epoch
          option1.series[0].data = top5
          this.chart[0].setOption(option0)
          this.chart[1].setOption(option1)
        }, 50)
      }

      if (this.type === 1) {
        // 指定图表的配置项和数据
        const option0 = {
          title: {
            text: 'metrics/precision',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              symbol: 'none', smooth: true
            }
          ]
        }
        const option1 = {
          title: {
            text: 'metrics/recall',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option2 = {
          title: {
            text: 'metrics/mAP_0.5',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option3 = {
          title: {
            text: 'metrics/mAP_0.5:0.95',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
        this.dispose()
        setTimeout(() => {
          this.chart[0] = echarts.init(document.getElementById('chart0'))
          this.chart[1] = echarts.init(document.getElementById('chart1'))
          this.chart[2] = echarts.init(document.getElementById('chart2'))
          this.chart[3] = echarts.init(document.getElementById('chart3'))
          const epoch = [];
          const data0 = [];
          const data1 = [];
          const data2 = [];
          const data3 = []
          for (let i = 0; i < this.result.length; i++) {
            epoch.push(this.result[i].epoch)
            data0.push(this.result[i]['metrics/precision'])
            data1.push(this.result[i]['metrics/recall'])
            data2.push(this.result[i]['metrics/mAP_0.5'])
            data3.push(this.result[i]['metrics/mAP_0.5:0.95'])
          }
          option0.xAxis.data = epoch
          option0.series[0].data = data0
          option1.xAxis.data = epoch
          option1.series[0].data = data1
          option2.xAxis.data = epoch
          option2.series[0].data = data2
          option3.xAxis.data = epoch
          option3.series[0].data = data3
          // 使用刚指定的配置项和数据显示图表
          this.chart[0].setOption(option0)
          this.chart[1].setOption(option1)
          this.chart[2].setOption(option2)
          this.chart[3].setOption(option3)
        }, 50)
      }

      if (this.type === 2) {
        // 指定图表的配置项和数据
        const option0 = {
          title: {
            text: 'metrics/precision',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option1 = {
          title: {
            text: 'metrics/recall',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option2 = {
          title: {
            text: 'metrics/mAP_0.5',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option3 = {
          title: {
            text: 'metrics/mAP_0.5:0.95',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        this.dispose()
        setTimeout(() => {
          this.chart[0] = echarts.init(document.getElementById('chart0'))
          this.chart[1] = echarts.init(document.getElementById('chart1'))
          this.chart[2] = echarts.init(document.getElementById('chart2'))
          this.chart[3] = echarts.init(document.getElementById('chart3'))

          const epoch = []
          const data0 = [];
          const data1 = [];
          const data2 = [];
          const data3 = []
          for (let i = 0; i < this.result.length; i++) {
            epoch.push(this.result[i].epoch)
            data0.push(this.result[i]['metrics/precision(M)'])
            data1.push(this.result[i]['metrics/recall(M)'])
            data2.push(this.result[i]['metrics/mAP_0.5(M)'])
            data3.push(this.result[i]['metrics/mAP_0.5:0.95(M)'])
          }
          option0.xAxis.data = epoch
          option0.series[0].data = data0
          option1.xAxis.data = epoch
          option1.series[0].data = data1
          option2.xAxis.data = epoch
          option2.series[0].data = data2
          option3.xAxis.data = epoch
          option3.series[0].data = data3
          this.chart[0].setOption(option0)
          this.chart[1].setOption(option1)
          this.chart[2].setOption(option2)
          this.chart[3].setOption(option3)
        }, 50)
      }
    },
    drawLoss (severity) {
      this.currentSeverity = severity
      this.loss = true
      this.metric = false
      this.curve = false
      this.confusion = false
      if (this.type === 0) {
        // 指定图表的配置项和数据
        const option0 = {
          title: {
            text: 'train/loss',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option1 = {
          title: {
            text: 'val/loss',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
        this.dispose()
        setTimeout(() => {
          this.chart[0] = echarts.init(document.getElementById('chart0'))
          this.chart[1] = echarts.init(document.getElementById('chart1'))
          const epoch = []
          const train = []
          const val = []
          for (let i = 0; i < this.result.length; i++) {
            epoch.push(this.result[i].epoch)
            train.push(this.result[i]['train/loss'])
            val.push(this.result[i]['val/loss'])
          }
          option0.xAxis.data = epoch
          option0.series[0].data = train
          option1.xAxis.data = epoch
          option1.series[0].data = val
          this.chart[0].setOption(option0)
          this.chart[1].setOption(option1)
        }, 50)
      }

      if (this.type === 1) {
        // 指定图表的配置项和数据
        const option0 = {
          title: {
            text: 'train/box_loss',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option1 = {
          title: {
            text: 'train/obj_loss',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option2 = {
          title: {
            text: 'train/cls_loss',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option3 = {
          title: {
            text: 'val/box_loss',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option4 = {
          title: {
            text: 'val/obj_loss',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option5 = {
          title: {
            text: 'val/cls_loss',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
        this.dispose()
        setTimeout(() => {
          this.chart[0] = echarts.init(document.getElementById('chart0'))
          this.chart[1] = echarts.init(document.getElementById('chart1'))
          this.chart[2] = echarts.init(document.getElementById('chart2'))
          this.chart[3] = echarts.init(document.getElementById('chart3'))
          this.chart[4] = echarts.init(document.getElementById('chart4'))
          this.chart[5] = echarts.init(document.getElementById('chart5'))
          const epoch = []
          const data0 = []
          const data1 = []
          const data2 = []
          const data3 = []
          const data4 = []
          const data5 = []
          for (let i = 0; i < this.result.length; i++) {
            epoch.push(this.result[i].epoch)
            data0.push(this.result[i]['train/box_loss'])
            data1.push(this.result[i]['train/obj_loss'])
            data2.push(this.result[i]['train/cls_loss'])
            data3.push(this.result[i]['val/box_loss'])
            data4.push(this.result[i]['val/obj_loss'])
            data5.push(this.result[i]['val/cls_loss'])
          }
          option0.xAxis.data = epoch
          option0.series[0].data = data0
          option1.xAxis.data = epoch
          option1.series[0].data = data1
          option2.xAxis.data = epoch
          option2.series[0].data = data2
          option3.xAxis.data = epoch
          option3.series[0].data = data3
          option4.xAxis.data = epoch
          option4.series[0].data = data4
          option5.xAxis.data = epoch
          option5.series[0].data = data5
          // 使用刚指定的配置项和数据显示图表
          this.chart[0].setOption(option0)
          this.chart[1].setOption(option1)
          this.chart[2].setOption(option2)
          this.chart[3].setOption(option3)
          this.chart[4].setOption(option4)
          this.chart[5].setOption(option5)
        }, 50)
      }

      if (this.type === 2) {
        const option0 = {
          title: {
            text: 'train/seg_loss',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option1 = {
          title: {
            text: 'train/obj_loss',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option2 = {
          title: {
            text: 'train/cls_loss',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option3 = {
          title: {
            text: 'val/seg_loss',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option4 = {
          title: {
            text: 'val/obj_loss',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        const option5 = {
          title: {
            text: 'val/cls_loss',
            left: 'center'
          },
          xAxis: {
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            name: 'epoch',
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              itemStyle: {
                color: '#1E90FF'
              },
              data: [],
              type: 'line',
              symbol: 'none',
              smooth: true
            }
          ]
        }
        this.dispose()
        setTimeout(() => {
          this.chart[0] = echarts.init(document.getElementById('chart0'))
          this.chart[1] = echarts.init(document.getElementById('chart1'))
          this.chart[2] = echarts.init(document.getElementById('chart2'))
          this.chart[3] = echarts.init(document.getElementById('chart3'))
          this.chart[4] = echarts.init(document.getElementById('chart4'))
          this.chart[5] = echarts.init(document.getElementById('chart5'))
          const epoch = []
          const data0 = []
          const data1 = []
          const data2 = []
          const data3 = []
          const data4 = []
          const data5 = []
          for (let i = 0; i < this.result.length; i++) {
            console.log(this.result[i])
            epoch.push(this.result[i].epoch)
            data0.push(this.result[i]['train/seg_loss'])
            data1.push(this.result[i]['train/obj_loss'])
            data2.push(this.result[i]['train/cls_loss'])
            data3.push(this.result[i]['val/seg_loss'])
            data4.push(this.result[i]['val/obj_loss'])
            data5.push(this.result[i]['val/cls_loss'])
          }
          option0.xAxis.data = epoch
          option0.series[0].data = data0
          option1.xAxis.data = epoch
          option1.series[0].data = data1
          option2.xAxis.data = epoch
          option2.series[0].data = data2
          option3.xAxis.data = epoch
          option3.series[0].data = data3
          option4.xAxis.data = epoch
          option4.series[0].data = data4
          option5.xAxis.data = epoch
          option5.series[0].data = data5
          this.chart[0].setOption(option0)
          this.chart[1].setOption(option1)
          this.chart[2].setOption(option2)
          this.chart[3].setOption(option3)
          this.chart[4].setOption(option4)
          this.chart[5].setOption(option5)
        }, 50)
      }
    }
  },
  created: function () {
    const modelID = this.$route.query.id
    this.getType(modelID)
    this.getReport(modelID)
  }
}
</script>

<style scoped>
</style>
